<template>
	<view class="eva-list">
		<tab :tabIndex="tabIndex" :tabValue="tabs" underlineColor="#ea8c37" @getIndex="change"></tab>
		<view class="search-date" v-show="tabIndex==0" @click="select_week=true">
			{{year_list[select_week_value[0]]}}年 第{{select_week_value[1]+1}}周
			<image src="/static/rili.png" mode="aspectFit"></image>
		</view>
		<view class="search-date" v-show="tabIndex==1" @click="select_month=true">
			{{year_list[select_month_value[0]]}}年 {{select_month_value[1]+1}}月
			<image src="/static/rili.png" mode="aspectFit"></image>
		</view>
		<view class="list">
			<view class="item" v-for="(item, i) in eva_list" :key="i">
				<!-- eva_list -->
				<text class="title">{{item.teacher.name}}</text>
				<text class="time">评价时间：{{item.updateTime}}</text>
				<view>
					<view class="content">
						{{item.content}}
					</view>
					<view class="imgs">
						<image @click="previewImage(JSON.parse(item.pictures), i)" v-for="(url, i) in JSON.parse(item.pictures)" :key="i" :src="`${api.xiaodeObsUrl}${url}`" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<uni-transition mode-class="fade"
			:styles="{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'rgba(0, 0, 0, .6)', 'z-index': 9}" :show="select_week || select_month" @click="closePopup">
		</uni-transition>
		<uni-transition :mode-class="['slide-bottom']"
			:styles="select_class"
			:show="select_week">
			<week-picker
				:value="week_value"
				:yearList="year_list" @confirm="weekChange" @cancel="closePopup"></week-picker>
		</uni-transition>
		<uni-transition :mode-class="['slide-bottom']"
			:styles="select_class"
			:show="select_month">
			<month-picker
				:value="month_value"
				:yearList="year_list" @confirm="monthChange" @cancel="closePopup"></month-picker>
		</uni-transition>
        <uni-load-more :status="more"></uni-load-more>
	</view>
</template>
<script>
import tab from '@/components/lgd-tab/lgd-tab.vue'
import monthPicker from '@/components/date-picker/month-picker.vue'
import weekPicker from '@/components/date-picker/week-picker.vue'
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
export default {
	components: {
		tab,
		weekPicker,
		monthPicker,
        uniLoadMore
	},
	data() {
		return {
			tabIndex: 0,
			tabs: ['每周评价', '每月评价'],
            page: 1,
            more: 'more',
            eva_list: [],
			select_class: {
				position: 'absolute',
				width: '100%',
				bottom: '0',
				left: 0,
				height: '670rpx',
				'z-index': 9
			},
			year_list: [2022, 2023, 2024, 2025],
			select_week: false,
			week_value: [0, 0],
			select_week_value: [0, 0],
			selectedWeek: '',
			select_week_date: '',
			
			select_month: false, // 每月
			month_value: [0, 0],
			select_month_value: [0, 0],
			select_month_date: '',
		}
	},
    onPullDownRefresh() {
        this.eva_list = [];
        this.page = 1;
        this.getEvaluation()
    },
    onReachBottom(){
        if(this.more == 'no-more') return;
        this.page++;
        this.getEvaluation()
    },
	onLoad(options){
		this.tabIndex = parseInt(options.type) || 0
		this.init();
	},
    methods: {
		init(){
			let currentMon = new Date().getMonth(),
				currentYear = new Date().getFullYear(),
				yearIndex = this.year_list.indexOf(currentYear);
			// 每周
			this.week_value= [yearIndex, getWeek(new Date())];
			this.select_week_value = [yearIndex, getWeek(new Date())];
			console.log(currentYear, this.select_week_value)
			this.select_week_date = `${currentYear}-${currentMon+1}-${new Date().getDate()}`;
			// 每月初始化
			this.month_value = [yearIndex, currentMon]

			this.select_month_value = [yearIndex, currentMon];
			this.select_month_date = `${currentYear}-${currentMon+1}-01`;
		},
		change(index){
			this.tabIndex = index;
			
			this.getEvaluation()
		},
        getEvaluation(){
			
	
			let cycle = this.tabIndex+1;
	
			let date = cycle==1?this.select_week_date:this.select_month_date;
			this.api.get('sMassage/stuAssess',{
				cycle,
				date,
				state: 2 // 1未评价，2已评价
			}).then(res=>{
				if(res.data.state == 'ok'){
					this.eva_list = res.data.studentAssesses;
				}
				uni.stopPullDownRefresh();
			})
            
        },
		weekChange(date, val){
			this.select_week_date = date;
			this.select_week_value = val;
			this.getEvaluation()
			this.closePopup()
		},
		monthChange(val){
			this.select_month_date = `${this.year_list[val[0]]}-${val[1]+1}-01`;
			this.select_month_value = val;
			this.getEvaluation()
			this.closePopup()
		},
		previewImage(list, i){
			let path = this.api.xiaodeObsUrl;
			for(let i=0; i<list.length; i++){
				if(list[i].indexOf('http')==-1){
					list[i] = path+list[i];
				}
			}
			uni.previewImage({
				current: i,
				urls: list,
				longPressActions: {
					itemList: [],
					success: function(data) {
						
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		closePopup(){
			this.select_week = this.select_month = false;
		}
	}
}
function getWeek(dt){
    let d1 = new Date(dt);
    let d2 = new Date(dt);
    d2.setMonth(0);
    d2.setDate(1);
    let oneWeek = d2.getDay();
    let rq = d1-d2;
    let days = Math.ceil(rq/(24*60*60*1000));
    let num = parseInt((oneWeek+days-1)/7);// 从0开始
    return num;
}
</script>
<style lang="less">
	.eva-list{
		.search-date{
			margin: 24rpx;
			font-size: 28rpx;
			color: #555555;
			text-align: right;
			image{
				margin-left: 8rpx;
				vertical-align: -14rpx;
				width: 48rpx;
				height: 48rpx;
				color: #55ACEE;
			}
		}
		.list{
			padding: 24rpx 32rpx;
		}
		.item{
			margin-bottom: 40rpx;
			.title{
				font-size: 32rpx;
				font-weight: bold;
				display: block;
			}
			.time{
				font-size: 24rpx;
				color: #999999;
			}
			.content{
				margin: 24rpx 0 32rpx;
			}
			.imgs{
				image{
					width: 120rpx;
					height: 120rpx;
					margin-right: 16rpx;
					margin-bottom: 20rpx;
					border-radius: 8rpx;
				}
			}
		}
	}
</style>